<script src="/lib/layui/xm-select.js"></script>

<div class="layui-fluid" style="padding: 25px;">
    <form class="layui-form" method="post" style="margin-top:20px" lay-filter="component-form-group" id="popdataadd">
        <input type="hidden" id="type" name="type" value="" />
        <input type="hidden" id="transportType" name="transportType" value="" />
        <input type="hidden" id="code" name="code" value="" />
        <input type="hidden" id="sysID" name="sysID" value="0" />
        <input type="hidden" id="database" name="database" value="" />
        <input type="hidden" id="compile" name="compile" value="" />
        <input type="hidden" id="oldfileName" name="oldfileName" value="" />
        <input type="hidden" id="oldfilPictureName" name="oldfilPictureName" value="" />

        <div class="layui-form-item" id="typeshow" >
            <label class="layui-form-label">类型</label>
            <div class="layui-form layui-input-block" style="width: 420px;" lay-filter="selecttypes" >
                <select id="selecttype" name="selecttype" lay-filter="demo">
                    <option value="0">文献</option>
                    <option value="1">图片</option>
                    <option value="2">视频</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">数据库</label>
            <div class="layui-input-block" style="width: 420px;">
                <select id="selectdb" name="selectdb" lay-filter="selectdb">
                    <option value="0">应急管理</option>
                    <option value="1">协同创新</option>
                    <option value="2">党校期刊</option>
                    <option value="3">两弹一星</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" id="xmselectshow">
            <label class="layui-form-label">资源分类</label>
            <div style="width: 420px;margin-left: 110px;height: 38px;">
                <div id="handle_userArr0" class="xm-select-demo"></div>
            </div>
        </div>

        <div class="layui-form-item" id="titleshow">
            <div class="layui-inline">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-inline" style="width: 420px;">
                    <input type="text" id="title" name="title" placeholder="请输入标题" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item" id="bookshow">
            <div class="layui-inline">
                <label class="layui-form-label">书名</label>
                <div class="layui-input-inline" style="width: 420px;">
                    <input type="text" id="bookName" name="bookName" placeholder="请输入书名" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item" id="sponsorshow">
            <div class="layui-inline">
                <label class="layui-form-label">主办单位</label>
                <div class="layui-input-inline">
                    <input type="text" name="sponsor" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline" id="editorshow">
                <label class="layui-form-label">主编</label>
                <div class="layui-input-inline">
                    <input type="text" name="chiefEditor" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item" id="areashow">
            <div class="layui-inline">
                <label class="layui-form-label">地区</label>
                <div class="layui-input-inline">
                    <select name="area" lay-filter="area">
                        <option value=""></option>
                        <option value="华北片区">华北片区</option>
                        <option value="华东片区">华东片区</option>
                        <option value="中南片区">中南片区</option>
                        <option value="西南片区">西南片区</option>
                        <option value="西北片区">西北片区</option>
                        <option value="东北片区">东北片区</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">分类</label>
                <div class="layui-input-inline">
                    <select name="classify" lay-filter="classify">
                        <option value=""></option>
                        <option value="中央党校">中央党校</option>
                        <option value="地方党校">地方党校</option>
                        <option value="其他党建">其他党建</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item" id="yearshow">
            <div class="layui-inline">
                <label class="layui-form-label">年</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" name="year" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">期</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" name="stage" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">总期</label>
                <div class="layui-input-inline">
                    <input type="text" name="totalPeriod" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <div id="dxfileshow" class="file-class">
                        <button type="button" class="layui-btn" id="upload-dx-expert">上传封面</button>
                        <input type="hidden" name="filePictureName" id="dxtxurl" value="" />
                        <div class="layui-upload-list">
                            <p id="upload-dxfile"></p>
                            <p id="test-upload-demodxText"></p>
                        </div>
                    </div>

                    <div class="file-class">
                        <button type="button" class="layui-btn" id="upload-normal-expert">上传文件</button>
                        <input type="hidden" name="fileName" id="txurl" value="" />
                        <div class="layui-upload-list">
                            <p id="upload-file"></p>
                            <p id="test-upload-demoText"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<style>
    .test-file {
        margin: 0 5px 0 10px;
    }

    .file-class {
        margin-left: 80px;
        width: 500px;
    }
</style>

<script>

    //协同创新
    var xtcxcls1 = [{
        value: "ca101",
        name: "中央精神",
    },
    {
        value: "ca102",
        name: "历史演进",
        children: [
            {
                value: "ca10201",
                name: "中国古代兵民合一的历史变迁",
            },
            {
                value: "ca10202",
                name: "中国特色协同创新式发展历程",
            },
        ]
    },
    {
        value: "ca103",
        name: "国内动态",
        children: [
            {
                value: "ca10301",
                name: "政策体系",
            },
            {
                value: "ca10302",
                name: "各地各方动态",
            },
            {
                value: "ca10303",
                name: "实践案例",
            },
            {
                value: "ca10304",
                name: "学术研究",
            },
        ]
    },
    {
        value: "ca104",
        name: "绵阳实践",
        children: [
            {
                value: "ca10401",
                name: "发展历程",
            },
            {
                value: "ca10402",
                name: "方针政策",
            },
            {
                value: "ca10403",
                name: "两弹一星精神",
            },
            {
                value: "ca10404",
                name: "绵阳经验",
            },
            {
                value: "ca10405",
                name: "理论研究",
            },
        ]
    },
    {
        value: "ca105",
        name: "国际视野",
        children: [
            {
                value: "ca10501",
                name: "国外实践动态",
            },
            {
                value: "ca10502",
                name: "理论研究",
            },
        ]
    },
    ]
    //应急管理
    var yjglcls1 = [{
        value: "ca201",
        name: "热点关注",
        children: [{
            value: "ca20101",
            name: "中央精神",
        }, {
            value: "ca20102",
            name: "政策法规",
        }, {
            value: "ca20103",
            name: "媒体报道",
        }]
    },
    {
        value: "ca202",
        name: "抗震救灾",
        children: [{
            value: "ca20201",
            name: "灾情回顾",
            children: [{
                value: "ca2020101",
                name: "全国灾情",
            },
            {
                value: "ca2020102",
                name: "四川灾情",
            },
            {
                value: "ca2020103",
                name: "绵阳灾情",
            }
            ]
        },
        {
            value: "ca20203",
            name: "救灾行动",
            children: [{
                value: "ca2020301",
                name: "政府主导",
            },
            {
                value: "ca2020302",
                name: "社会参与",
            },
            {
                value: "ca2020303",
                name: "群众自救",
            },
            {
                value: "ca2020304",
                name: "国际救援",
            }
            ]
        }, {
            value: "ca20202",
            name: "领导决策",
            children: [{
                value: "ca2020201",
                name: "国家层面",
            },
            {
                value: "ca2020202",
                name: "四川层面",
            },
            {
                value: "ca2020203",
                name: "绵阳层面",
            }
            ]
        }
        ]
    },
    {
        value: "ca203",
        name: "灾后重建",
        children: [{
            value: "ca20301",
            name: "重建政策",
            children: [{
                value: "ca2030101",
                name: "规划",
            },
            {
                value: "ca2030102",
                name: "对口援建",
            }
            ]
        },
        {
            value: "ca20302",
            name: "重建实践",
            children: [{
                value: "ca2030201",
                name: "基础设施",
            },
            {
                value: "ca2030202",
                name: "住房",
            }, {
                value: "ca2030203",
                name: "产业",
            },
            {
                value: "ca2030204",
                name: "社会(社区、心理)",
            }]
        }
        ]
    },
    {
        value: "ca204",
        name: "发展振兴",
        children: [{
            value: "ca20401",
            name: "经济发展",
        }, {
            value: "ca20402",
            name: "社会发展",
        }, {
            value: "ca20403",
            name: "生态发展",
        }
        ]
    },
    {
        value: "ca205",
        name: "研究成果",
        children: [{
            value: "ca20501",
            name: "全国研究",
            children: [{
                value: "ca2050101",
                name: "论文",
            },
            {
                value: "ca2050102",
                name: "著作",
            }, {
                value: "ca2050103",
                name: "专题报道",
            }]
        },
        {
            value: "ca20502",
            name: "绵阳研究",
            children: [{
                value: "ca2050201",
                name: "课题",
            },
            {
                value: "ca2050202",
                name: "论文",
            }, {
                value: "ca2050203",
                name: "著作",
            }, {
                value: "ca2050204",
                name: "课程",
            },
            {
                value: "ca2050205",
                name: "口述史",
            },
            {
                value: "ca2050206",
                name: "典型案例",
            }, {
                value: "ca2050207",
                name: "典型人物",
            }]
        }
        ]
    }
    ]
    //党校期刊
    var dxqkcls1 = [
        {
            value: "X01,X08",
            name: "理论建设",
        },
        {
            value: "X02",
            name: "党史研究",
        },
        {
            value: "X05",
            name: "思想政治",
        },
        {
            value: "X06",
            name: "领导决策",
        },
        {
            value: "X03",
            name: "党员教育",
        },
        {
            value: "X04",
            name: "支部生活",
        }
    ]
    //两弹一星
    var ldyxcls1 = [
        {
            value: "ci401",
            name: "“两弹一星”精神",
            children: [{
                value: "ci40101",
                name: "“两弹一星”精神价值",
            }, {
                value: "ci40102",
                name: "“两弹一星”精神研究",
            }, {
                value: "ci40103",
                name: "“两弹一星”精神传承",
            }]
        },
        {
            value: "ci402",
            name: "“两弹一星”历程",
            children: [{
                value: "ci40201",
                name: "中国核弹研发历程",
            }, {
                value: "ci40202",
                name: "中国导弹研发历程",
            }, {
                value: "ci40203",
                name: "中国航天发展历程",
            }, {
                value: "ci40204",
                name: "两弹一星军工体系",
            }]
        },
        {
            value: "ci403",
            name: "“两弹一星”人物",
            children: [{
                value: "ci40301",
                name: "“两弹一星”领导集体",
            }, {
                value: "ci40302",
                name: "“两弹一星”科研集体",
            },{
                value: "ci40303",
                name: "“两弹一星”保障集体",
            }]
        },
        {
            value: "ci404",
            name: "“两弹一星”科技",
            children: [{
                value: "ci40401",
                name: "“两弹一星”科普的神秘面纱",
            }, {
                value: "ci40402",
                name: "“两弹一星”科技的和平利用",
            }, {
                value: "ci40403",
                name: "“两弹一星”国防的强大力量",
            }, {
                value: "ci40404",
                name: "“两弹一星”军事的国际竞争",
            }]
        },
        {
            value: "ci405",
            name: "其他",
        }
    ];

    loadtree(yjglcls1, '');

    var form = layui.form;
    var upload = layui.upload;
    form.render();
    var fileaccept = 'file';
    var fileacceptMime = 'application/pdf';
    var fileexts = 'pdf';
    var filesize = 0;

    //加载资源分类
    function loadtree(cls, code) {
        var handle_userArr0 = xmSelect.render({
            el: '#handle_userArr0',
            model: { label: { type: 'text' } },
            direction: 'down', //选择框向下
            tree: {
                show: true,
                expandedKeys: [code],//默认展开节点
                strict: false,//非严格模式
            },
            height: "200px",
            data: cls,
            initValue: [code],//初始化
            autoRow: true,
            on: function (data) {
                if (data.isAdd) {
                    $("#code").val(data.change.slice(0, 1)[0].value);
                    return data.change.slice(0, 1);
                }
            }
        })
    }

    //上传文件
    var uploadInst = upload.render({
        elem: '#upload-normal-expert'
        , accept: fileaccept
        , acceptMime: fileacceptMime
        , exts: fileexts
        , size: filesize
        , number: 1
        , auto: false
        , choose: function (obj) {
            $("#upload-file").empty();
            var files = this.files = obj.resetFile(); // 将每次选择的文件重置
            obj.preview(function (index, file, result) {
                var tr = $([' <label class="test-file"  id="test-upload-normal-file">' + file.name +
                    '</label><button class="layui-btn layui-btn-xs layui-btn-danger demo-delete" onclick="DeleteFiles()">删除</button>'].join(''));

                //删除
                tr.find('.demo-delete').on('click', function () {
                    delete files[index]; //删除对应的文件
                    tr.remove();
                    uploadInst.config.elem.next()[0].value = '';
                });

                $("#upload-file").append(tr);
                $("#txurl").val(file.name);
            });
        }
        , done: function (res) {
            //如果上传失败
            if (res.code < 0) {
                return layer.msg(res.msg);
            }
            layer.msg("文件上传成功");
        }
        , error: function () {
            //演示失败状态，并实现重传
            var demoText = $('#test-upload-demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
                uploadInst.upload();
            });
        }
    });

    //党校-上传封面
    var uploaddxInst = upload.render({
        elem: '#upload-dx-expert'
        , accept: 'image'
        , acceptMime: 'image/*'
        , exts: 'jpg'
        , size: 0
        , number: 1
        , field: 'filePicture'
        , auto: false
        , choose: function (obj) {
            $("#upload-dxfile").empty();
            var files = this.files = obj.resetFile(); // 将每次选择的文件重置
            obj.preview(function (index, file, result) {
                var tr = $([' <label class="test-file"  id="test-upload-dx-file">' + file.name +
                    '</label><button class="layui-btn layui-btn-xs layui-btn-danger demodx-delete" onclick="DeletedxFiles()">删除</button>'].join(''));

                //删除
                tr.find('.demodx-delete').on('click', function () {
                    delete files[index]; //删除对应的文件
                    tr.remove();
                    uploadInst.config.elem.next()[0].value = '';
                });

                $("#upload-dxfile").append(tr);
                $("#dxtxurl").val(file.name);
            });
        }
        , done: function (res) {
            //如果上传失败
            if (res.code < 0) {
                return layer.msg(res.msg);
            }
            layer.msg("文件上传成功");
        }
        , error: function () {
            //演示失败状态，并实现重传
            var demoText = $('#test-upload-demodxText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demodx-reload">重试</a>');
            demoText.find('.demodx-reload').on('click', function () {
                uploaddxInst.upload();
            });
        }
    });


    //初始化的删除文件，只移除文件，保存了再删。
    function DeleteFiles() {
        $("#upload-file").empty();
        $("#txurl").val("");
    }

    //删除党校期刊的文件
    function DeletedxFiles() {
        $("#upload-dxfile").empty();
        $("#dxtxurl").val("");
    }

    //切换类型
    form.on('select(demo)', function (data) {
        DeleteFiles(); //清空之前传的文件
        DeletedxFiles();
        changeuplod(data.value);
        $('#transportType').val(data.value);
        getShow($('#selectdb').val(), data.value);
    });

    //切换数据库
    form.on('select(selectdb)', function (data) {
        if (data.value == "2") {
            DeleteFiles();
            DeletedxFiles();
            changeuploaddx(data.value);
        }else if(data.value == "3"){
            DeleteFiles();
            DeletedxFiles();
            changeuploaddx(data.value);
        }else{
            changeuplod($('#selecttype').val());
        }

        $('#type').val(data.value);
        getShow(data.value, $('#selecttype').val())

    });

    //编辑-初始化赋值，且文献，数据库不可编辑，视频封面地址不为空赋值
    function setCode(code, url, pictureAddress,compile) {
        $("#selecttype").attr("disabled", "disabled");
        $("#selectdb").attr("disabled", "disabled"); 
        
        getShow($('#selectdb').val(), $('#selecttype').val(),code);
        form.render('select');
        if ($('#selectdb').val() == "2") {
            if (url != "") {
                pictureAddress = url + ".jpg"; //党校期刊的封面
                url += ".pdf";
            }
            uploadInst.reload({
                accept: 'file' //只允许上传图片
                , acceptMime: 'application/pdf' //只筛选图片
                , exts: 'pdf'
                , size: 0 //限定大小
            });
        }
        //两弹一星书籍
        if($('#selectdb').val() == "3" && $('#selecttype').val() == "1"){
            if(compile !=""){
                pictureAddress = compile + ".jpg";
            }
            

            uploadInst.reload({
                accept: 'file' //只允许上传pdf
                , acceptMime: 'application/pdf' //只筛选pdf
                , exts: 'pdf'
                , size: 0 //限定大小
            });
        }

        //getShow($('#selectdb').val(), $('#selecttype').val(),code);

        if (url != "") {
            var tr = $(['<label class="test-file" id="test-upload-normal-file">' + url
                + '</label><button class="layui-btn layui-btn-xs layui-btn-danger demo-delete" onclick="DeleteFiles()">删除</button>'].join(''))
            $("#upload-file").append(tr);
            $("#txurl").val(url);
        }
        if (pictureAddress != "") {
            var tr = $(['<label class="test-file" id="test-upload-dx-file">' + pictureAddress
                + '</label><button class="layui-btn layui-btn-xs layui-btn-danger demodx-delete" onclick="DeletedxFiles()">删除</button>'].join(''))
            $("#upload-dxfile").append(tr);
            $("#dxtxurl").val(pictureAddress);
        }
    }


    //根据不同库展示不同输入框
    function getShow(code, type,treecode) {
        var cls = yjglcls1;
        var t= '<option value="0">文献</option><option value="1">图片</option><option value="2">视频</option>';
        if (code == 2) {
            cls = [];
            $("#xmselectshow").hide();
            $("#typeshow").hide();
            $("#titleshow").hide();
            $("#bookshow").show();
            $("#sponsorshow").show();
            $("#editorshow").show();
            $("#areashow").show();
            $('#yearshow').show();
            $('#dxfileshow').show();
        } 
        else {
            $("#xmselectshow").show();
            $("#typeshow").show();
            $("#titleshow").show();
            $("#bookshow").hide();
            $("#sponsorshow").hide();
            $("#editorshow").hide();
            $("#areashow").hide();
            $('#yearshow').hide();
            $('#dxfileshow').hide();
            if (code == 1) {
                cls = xtcxcls1;
            }
            else if(code == 3){
                cls = ldyxcls1;
                $("#sponsorshow").show();
                $("#editorshow").show();
                
                t= '<option value="0">文献</option><option value="1">书籍</option>';
                if (type == 1) {
                    $('#dxfileshow').show();
                }
            }
            
            
            if (type == 2) {
                $('#dxfileshow').show();
            }
        }
        
        $('#selecttype').empty();
        $('#selecttype').append(t);
        $('#selecttype').val(type);
        form.render('select','selecttypes');
        loadtree(cls,treecode); //初始化加载xm-select
    }

    //根据不同的类型，上传选择不同的类型文件
    function changeuplod(type) {
        if (type == "0") {
            fileaccept = 'file';
            fileacceptMime = 'application/pdf';
            fileexts = 'pdf';
            filesize = 0;
        } else if (type == "1") {
            fileaccept = 'image';
            fileacceptMime = 'image/*';
            fileexts = 'jpg|png|gif|bmp|jpeg';
            filesize = 0;
        } else {
            fileaccept = 'video';
            fileacceptMime = 'video/mp4';
            fileexts = 'mp4';
            filesize = 512000;
        }

        //重载该实例，支持重载全部基础参数
        uploadInst.reload({
            accept: fileaccept
            , acceptMime: fileacceptMime
            , exts: fileexts
            , size: filesize
        });
    }

    //根据数据库不同，党校期刊，上传文件为pdf类型
    function changeuploaddx(type){
        if (type == "2" || type == "3") {
            uploadInst.reload({
                accept: 'file'
                , acceptMime: 'application/pdf'
                , exts: 'pdf'
                , size: 0
            });
        }
    }
</script>